<script setup lang="ts">
import { ResourceContentVO } from '@/api/resource/content'

const emit = defineEmits(['delete', 'update'])

defineProps<{
  list: ResourceContentVO[]
}>()

const handleUpdate = (id: number) => {
  emit('update', id)
}

const handleDelete = (id: number) => {
  emit('delete', id)
}

</script>

<template>
  <el-row>
    <el-col v-for="item in list" :key="item.id" :span="3">
      <el-card class="card">
        <template #header>
          <div class="img h-48 w-48">
            <el-image
              :src="item.url"
              fit="cover"
              :preview-src-list="[item.url]"
              hide-on-click-modal
            >
              <template #placeholder>
                <div class="img-loading"> Loading... </div>
              </template>
            </el-image>
          </div>
        </template>

        <el-space direction="vertical" alignment="normal">
          <el-text size="large">{{ item.name }}</el-text>
          <el-text type="info">{{ item.remark }}</el-text>
          <div>
            <el-button type="primary" link @click="handleUpdate(item.id)">修改</el-button>
            <el-button type="danger" link @click="handleDelete(item.id)">删除</el-button>
          </div>
        </el-space>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">
.card {
  margin: 16px;

  :deep(.el-card__header) {
    padding: 4px;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  :deep(.el-card__body) {
    padding: 16px;
  }
}

.img {
  -webkit-user-drag: none;

  &-loading {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
  }
}
</style>
